<template>
  <div class="emoji-picker">
    <!-- 搜索框 -->
    <van-search
        v-model="searchKeyword"
        placeholder="搜索表情"
        shape="round"
        @update:model-value="handleSearch"
    />

    <!-- 分类标签 -->
    <van-tabs v-model:active="activeCategory" swipeable>
      <van-tab v-for="category in filteredCategories" :title="category.name" :key="category.key">
        <div class="category-icon">
          <component :is="category.icon" />
        </div>
      </van-tab>
    </van-tabs>

    <!-- Emoji 列表 -->
    <div class="emoji-grid">
      <template v-for="emoji in filteredEmojis" :key="emoji.unicode">
        <div
            class="emoji-item"
            @click="handleSelect(emoji)"
            :title="emoji.annotation"
        >
          {{ emoji.emoji }}
        </div>
      </template>
    </div>

    <!-- 最近使用 -->
    <div v-if="showRecent" class="recent-section">
      <h4>最近使用</h4>
      <div class="emoji-grid">
        <div
            v-for="emoji in recentEmojis"
            :key="emoji.unicode"
            class="emoji-item"
            @click="handleSelect(emoji)"
        >
          {{ emoji.emoji }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { SmileO, StarO, HeartO, ThumbCircleO } from '@vant/icons'
import emojis from '@/data/emojis.json' // 从CDN加载的emoji数据

// // 在组件中动态加载完整数据集
// const emojis = ref([])
//
// onMounted(async () => {
//   const response = await fetch('https://cdn.jsdelivr.net/npm/emojibase-data@6/en/data.json')
//   emojis.value = await response.json()
// })

// 分类配置
const categories = ref([
  { key: 'people', name: '表情', icon: SmileO },
  { key: 'nature', name: '自然', icon: StarO },
  { key: 'food', name: '食物', icon: HeartO },
  { key: 'activity', name: '活动', icon: ThumbCircleO }
])

// 响应式数据
const activeCategory = ref(0)
const searchKeyword = ref('')
const recentEmojis = ref(JSON.parse(localStorage.getItem('recentEmojis') || []))

// 计算属性
const filteredCategories = computed(() => {
  return categories.value.filter(cat =>
      emojis.some(e => e.group === cat.key))
})

const filteredEmojis = computed(() => {
  const currentCategory = filteredCategories.value[activeCategory.value]?.key
  return emojis.filter(emoji => {
    const matchCategory = emoji.group === currentCategory
    const matchSearch = emoji.annotation.includes(searchKeyword.value) ||
        emoji.tags.some(tag => tag.includes(searchKeyword.value))
    return matchCategory && matchSearch
  })
})

const showRecent = computed(() => {
  return !searchKeyword.value && recentEmojis.value.length > 0
})

// 方法
const handleSelect = (emoji) => {
  addToRecent(emoji)
  emit('select', emoji.emoji)
}

const addToRecent = (emoji) => {
  recentEmojis.value = [
    emoji,
    ...recentEmojis.value.filter(e => e.unicode !== emoji.unicode)
  ].slice(0, 12)
  localStorage.setItem('recentEmojis', JSON.stringify(recentEmojis.value))
}

const handleSearch = (val) => {
  searchKeyword.value = val.toLowerCase()
}

// 初始化加载emoji数据
onMounted(async () => {
  if (emojis.length === 0) {
    const response = await fetch('https://cdn.jsdelivr.net/npm/emojibase-data@6/en/data.json')
    emojis.value = await response.json()
  }
})
</script>

<style scoped>
.emoji-picker {
  width: 100%;
  height: 300px;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
}

.category-icon {
  padding: 8px;
  text-align: center;

  :deep(svg) {
    width: 20px;
    height: 20px;
  }
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.emoji-item {
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  padding: 4px;
  transition: transform 0.2s;
  user-select: none;

  &:hover {
    transform: scale(1.2);
    background: #f0f0f0;
    border-radius: 4px;
  }
}

.recent-section {
  padding: 8px;
  border-top: 1px solid #eee;

  h4 {
    margin: 8px 0;
    color: #666;
    font-size: 12px;
  }
}
</style>
